<template>
  <transition name="fade" mode="out-in">
    <div class="code">
      <van-nav-bar
        title="我的推荐码"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="content">
        <div class="box">
          <div class="box-content">
            <div class="box-content-code">
              {{ code }}
            </div>
          </div>
          <van-button 
            size="large" 
            class="copy-btn" 
            v-clipboard:copy="code"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >复制推荐码</van-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { Button, NavBar, Toast } from 'vant';
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
  },
  data () {
    return {
      code: 'TJM10101'
    }
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    // 复制成功
    onCopy(e){
      Toast.success({
        message: '复制成功！',
        duration: 1000,
      })
    },
    // 复制失败
    onError(e){
      Toast.fail({
        message: '复制失败！',
        duration: 1000,
      })
    },
  },
}
</script>

<style scoped>
.code {
  height: 100vh;
  overflow: auto;
  background-color: #F3F3F3;
  color: #38393A;
}
.content {
  padding: 30px;
}
.box {
  border-radius: 8px;
  background-color: #fff;
}
.box-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
}
.box-content-code {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  padding: 10px 22px;
  background-color: #F3F3F3;
  font-size: 28px;
  line-height: 40px;
}
.copy-btn {
  color: #fff;
  background-color: #FB999A;
  border-radius: 0 0 8px 8px;
}
</style>
